<template>
    <div class="TaskWarp">
        <div class="divMain listenPanDuan" @click.stop>
            <div class="divTitle">
                <h2>{{Questions.child.QtypeName}}：{{Questions.child.QuestionRemark}}</h2>
            </div>
            <div class="tigan" v-html="listenPanDuantigan(Questions.child,Questions.child.stem)"></div>
            <div class="divContent" :style='{top: !Questions.transit? divContentTop:divContentMinTop}'>
                <div class="touchMove" @touchstart="TOUCHMOVE" @mousedown="TOUCHMOVE"></div>
                <div class="boxContent">
                    <swiper class="swiperCont" :options="swiperOption">
                        <div class="swiper-pagination" slot="pagination"></div>
                        <swiper-slide class="swiperItem" v-for="(item,index) in Questions.child.stem" v-if="isShowChild(Questions.child,item)" :key="item">
                            <transit :Questions="loadChild(item)" :defAnswer="defAnswer"></transit>
                        </swiper-slide>
                    </swiper>
                </div>
            </div>
        </div>
        <transition enter-active-class="animated zoomIn">
            <bigImg :imgSrc="bigImgInfo" v-if="bigImgInfo.src != ''"></bigImg>
        </transition>
    </div>
</template>

<script>
import transit from './base/transit.vue'
import { mapGetters, mapActions } from 'vuex'
export default {
    name: "listenPanDuan",
    props: ["Questions","defAnswer"],
    components: {
        transit
    },
    computed: mapGetters([
        'divContentTop',
        'divContentMinTop'
    ]),
    methods: {
        ...mapActions([
            'TOUCHMOVE'
        ]),
        listenPanDuantigan(child, stem) {
            for (let i = 0; i < stem.length; i++) {
                if (stem[i].QuestionTypeCode == child.QuestionTypeCode) {
                    return stem[i].StemContent
                }
            }
        },
        isShowChild(child, stem) {
            if (stem.QuestionTypeCode == child.QuestionTypeCode) {
                return false
            } else {
                return true
            }
        },
        itemLineHeight() {
            return {
                lineHeight: $('.divItem').height() + 'px'
            }
        },
        loadChild(stem) {
            var question = {}
            $.extend(true, question, this.Questions)
            question.QuestionTypeCode = stem.QuestionTypeCode
            question.child.QuestionTypeCode = stem.QuestionTypeCode
            question.child.stem = [stem]
            console.log(stem)
            question['transit'] = true
            return question
        }
    },
    mounted() {
        var _this = this;

        $('.tigan img').each(function () {
            $(this).upImgSrc()
            $(this).on('dblclick', function () {
                _this.bigImgInfo.src = $(this).attr('src')
            })
        })
        $('.tigan audio').each(function () {
            $(this).upAudioSrc()
        })
    },
    data() {
        return {
            bigImgInfo: {
                src: ''
            },
            swiperOption: {
                // notNextTick是一个组件自有属性，如果notNextTick设置为true，组件则不会通过NextTick来实例化swiper，也就意味着你可以在第一时间获取到swiper对象，假如你需要刚加载遍使用获取swiper对象来做什么事，那么这个属性一定要是true
                notNextTick: true,
                // swiper configs 所有的配置同swiper官方api配置
                pagination: '.swiper-pagination',
                slidesPerView: 1,
                paginationClickable: true,
                spaceBetween: 30,
                noSwiping: true,
                noSwipingClass: 'noSwipwe',
                loop: false
            }
        }
    }
}


</script>

<style lang="scss" rel="stylesheet/scss">
.DanXuanOpts {
    display: inline;
    height: 100%;
    p {
        display: inline;
    }
    img {
        height: 100%;
    }
}

.smallTtigan {
    line-height: 60px;
    height: 60px;
    overflow: hidden;
}
</style>
<style lang="scss" rel="stylesheet/scss" scoped>
@import '../../../assets/css/public.scss';

.TaskWarp {
    height: 90%;
    width: 90%;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
    .divMain {
        position: absolute;
        overflow: hidden;
        height: 100%;
        width: 100%;
        .divContent {
            position: absolute;
            top: 80px;
            left: 0;
            width: 100%;
            overflow: hidden;
            height: 100%;

            .boxContent {
                overflow: scroll;
                .swiperCont {
                    height: 100%;
                    .swiperItem {
                        height: 100%;
                        .itemWarp {
                            height: 80%;
                            overflow: auto;
                            display: flex;
                            flex-direction: column;
                            .divItem {
                                height: 14%;
                                margin: 1em auto;
                                width: 80%;
                                padding: 0 54px;
                                border-radius: 20px;
                                box-shadow: 0 2px 8px 0 #c5d0da;
                            }
                        }
                    }
                }
            }
        }
        .current span {
            color: #666;
        }
    }
}
</style>
